<template>
  <div class="main-layout">
    <router-view v-slot="{ Component }">
      <keep-alive :include="cachedViews">
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <BottomNav />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import BottomNav from './BottomNav.vue'

const route = useRoute()

// 需要缓存的页面
const cachedViews = computed(() => {
  const views = ['Home', 'Blog', 'Message', 'Profile']
  return views.filter(view => route.meta.keepAlive)
})
</script>

<style lang="scss" scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background-color);
  
  :deep(> *:first-child) {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 50px; // 为底部导航留出空间
  }
}
</style> 